"use client";
import HeaderBack from "@/components/HeaderBack";
import { HappyWheelTypeEnum } from "@/enums";
import clsx from "clsx";
import React from "react";
import ContainerBox from "./containerBox";
import styles from "./page.module.scss";
import TimeDown from "./timeDown";

const Page = () => {
    const [curType, setCurType] = React.useState(HappyWheelTypeEnum.DAY);

    const wheelType = React.useMemo(() => {
        return [
            { title: "DIA", key: HappyWheelTypeEnum.DAY },
            { title: "SEM", key: HappyWheelTypeEnum.WEEK },
            { title: "MÊS", key: HappyWheelTypeEnum.MONTH },
        ];
    }, []);

    const typeChange = (data: any) => {
        setCurType(data.key);
    };

    return (
        <>
            <HeaderBack
                showBack={true}
                headerRender={() => (
                    <div className="relative ml-[.43rem] flex h-[100%] w-full items-center justify-center py-[.05rem]">
                        {wheelType.map((item) => {
                            return (
                                <div
                                    className={clsx("h-[100%] flex-1 leading-[1]", styles.typeItem)}
                                    key={item.key}
                                    onClick={() => typeChange(item)}
                                >
                                    <div className="relative z-[3] flex h-[100%] flex-col items-center justify-center">
                                        <div className="mb-[2px] text-[12px] font-black">
                                            {item.title}
                                        </div>
                                        <TimeDown></TimeDown>
                                    </div>
                                </div>
                            );
                        })}
                        <div
                            className={styles.typeSelected}
                            style={{
                                transform: `translateX(calc(${curType * 100}% + ${curType * 0.05}rem))`,
                            }}
                        ></div>
                    </div>
                )}
                showService={false}
                className="!h-[.55rem]"
            />
            <main className={"main-header hasFlag stickyFlag"}>
                <div className="p-[.1rem]">
                    <ContainerBox curType={curType}></ContainerBox>
                </div>
            </main>
        </>
    );
};

export default Page;